<template>
  <div style="padding-top:40px;">
    <group title="基本信息：">
      <x-input label-width="80px" v-model="userinfo.id" disabled title="学号:"></x-input>
      <x-input label-width="80px" v-model="userinfo.name" disabled title="姓名:"></x-input>
      <x-input label-width="80px" v-model="updateInfo.phone" title="手机号:"></x-input>
      <x-input label-width="80px" v-model="updateInfo.email" title="邮箱:"></x-input>
    </group><br>
    <box gap="15px 15px">
      <x-button type="primary" @click.native="updateinfo">确认修改</x-button>
    </box>
    <div v-transfer-dom>
      <alert v-model="show" title="错误">手机号不能为空！</alert>
      <alert v-model="show3" title="错误">邮箱号不能为空！</alert>
      <alert v-model="show1" title="错误">手机号格式不对！</alert>
      <alert v-model="show2" title="错误">邮箱号格式不对！</alert>
      <alert v-model="show4" title="提示">已更改！</alert>
    </div>
  </div>
</template>
<script>
 import {Group, XInput, XButton, Box, Alert, TransferDomDirective as TransferDom} from 'vux'
export default{
   directives: {
     TransferDom
   },
   components: {
     Group,
     XInput,
     XButton,
     Box,
     Alert
   },
   created () {
     this.getinfo()
   },
   methods: {
     getinfo () {
       this.$http.get('/api/ac/user/selfInfo').then((res) => {
         this.userinfo = res.data.content
         this.updateInfo.phone = this.userinfo.phone
         this.updateInfo.email = this.userinfo.email
       })
     },
     updateinfo () {
       console.log(this.updateInfo)
       if (this.updateInfo.phone === '') {
         this.show = true
       } else if (this.updateInfo.email === '') {
         this.show3 = true
       } else if (!(/^1[0-9]{10}$/.test(this.updateInfo.phone))) {
         this.show1 = true
       } else if (!(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(this.updateInfo.email))) {
         this.show2 = true
       } else {
         this.$http.put('/api/ac/user/selfInfo', {}, {params: this.updateInfo}).then((res) => {
           if (res.data.code === 0) {
             this.show4 = true
             this.getinfo()
           } else {
             alert('失败')
           }
         })
       }
     }
   },
   data () {
     return {
       userinfo: {
       },
       updateInfo: {
         phone: '',
         email: ''
       },
       show: false,
       show1: false,
       show2: false,
       show3: false,
       show4: false
     }
   }
}
</script>
<style>

</style>
